<template>
  <view>
    <!-- 搜索框 -->
    <uGoSearch />
    <!-- tab栏 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#eb4450"
      bar-width="150"
      bar-height="3"
      :bold="false"
      inactive-color="#3d3d3d"
    ></u-tabs>
    <!-- 商品列表 -->
    <!-- 综合 -->
    <view class="goods_list" v-if="current === 0">
      <navigator
        v-for="item in goodsList"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
      >
        <!-- 商品图片 -->
        <view class="goods_image">
          <u-image
            :src="
              item.goods_small_logo ||
              'https://img2.baidu.com/it/u=1852786483,3450763574&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=520'
            "
            height="191"
          ></u-image>
        </view>
        <!-- 商品信息 -->
        <view class="goods_info">
          <!-- 商品标题 -->
          <view class="goods_info_title">{{ item.goods_name }}</view>
          <!-- 商品价格 -->
          <view class="goods_info_price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 销量 -->
    <view v-if="current === 1">销量</view>
    <view v-if="current === 2">价格</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goodsList: [],
    };
  },
  onLoad(options) {
    // {cid: "5"}
    // console.log(options.cid);
    this.params = {
      query: "",
      cid: options.cid,
      pagenum: 1,
      pagesize: 10,
    };
    this.getGoodsList();
  },
  // 用户下拉刷新事件
  async onPullDownRefresh() {
    // console.log("onPullDownRefresh");
    // 刷新需要完成，将页码重置为第1页 数组重置为空数组
    this.params.pagenum = 1;
    this.goodsList = [];
    // 重新发送请求
    await this.getGoodsList();
    // 调用停止刷新方法，但因为请求数据是异步请求，所以需要加async await
    wx.stopPullDownRefresh();
  },
  // 监听用户上拉触底事件
  onReachBottom() {
    // console.log("onReachBottom");
    if (this.goodsList.length < this.total) {
      // 说明还有下一页
      // 页码++
      this.params.pagenum++;
      // 发送请求拿最新的数据
      this.getGoodsList();
    } else {
      uni.showToast({
        title: "已经是最后一页啦~",
        icon: "none",
      });
    }
  },
  methods: {
    change(index) {
      this.current = index;
    },
    async getGoodsList() {
      const res = await this.$u.get(`/goods/search`, this.params);
      // console.log(res);
      // 合并新旧数据
      this.goodsList = [...this.goodsList, ...res.message.goods];
      // this.goodsList = res.message.goods;
      this.total = res.message.total;
    },
  },
};
</script>

<style lang="scss">
.goods_list {
  navigator {
    display: flex;
    padding: 15rpx;
    border-bottom: 1px solid #eee;
    .goods_image {
      flex: 1;
    }
    .goods_info {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 3;
      .goods_info_title {
      }
      .goods_info_price {
        color: #eb4450;
        &:before {
          content: "￥";
          font-size: 16rpx;
        }
      }
    }
  }
}
</style>